<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>生成单元和楼层</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
	content="Blue Moon - Responsive Admin Dashboard" />
<meta name="keywords"
	content="Notifications, Admin, Dashboard, Bootstrap3, Sass, transform, CSS3, HTML5, Web design, UI Design, Responsive Dashboard, Responsive Admin, Admin Theme, Best Admin UI, Bootstrap Theme, Wrapbootstrap, Bootstrap, bootstrap.gallery" />
<meta name="author" content="Bootstrap Gallery" />
<link rel="shortcut icon" href="img/favicon.ico">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/new2.css" rel="stylesheet">

<link href="css/new3.css" rel="stylesheet">
<!-- Important. For Theming change primary-color variable in main.css  -->

<link href="fonts/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--CSACASDAAAAAAAAAAA-->

<script src="layer/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<link href="layer/bootstrap.css">

<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<div id="first" class="dashboard-container">
		<!-- Row Start -->
		<DIV>
			<div class="dashboard-container">
				<div class="dashboard-wrapper">
					<!-- Row Start -->
					<div class="row">
						<div class="col-lg-12 col-md-12">
							<div class="widget">
								<div class="widget-body">
									<div id="dt_example" class="example_alt_pagination">
										<div class="row">
											<form action="/customerList" method="post" id="customer-form"
												name="customer-form">
												<input id="currentPageNo" name="currentPageNo" value=""
													type="hidden" />
												<div class="col-xs-3">
													&nbsp;&nbsp;联系电话&nbsp; <input type="text"
														style="height: 30px; width: 60%;" name="cusPhone"
														th:value="${cusPhone}">
												</div>
												<div class="col-xs-4">
													客户姓名 &nbsp; <input type="text"
														style="height: 30px; width: 60%;" name="cusName"
														th:value="${cusName}">
												</div>
												<div class="col-xs-4">
													会员卡号&nbsp; <input type="text"
														style="height: 30px; width: 60%;" name="cusCardNumber"
														th:value="${cusCardNumber}">
												</div>
												<div class="col-xs-1">
													<button type="submit" class="btn btn-primary"
														style="height: 30px; width: 80%; padding: 0px">查找</button>
												</div>
											</form>
										</div>
										&nbsp; 提示：为了提高效率，查询时，请尽量使用联系电话和客户姓名一起查找；<br />
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;
										&nbsp;查询时，联系电话和会员卡是精确查找，客户姓名是模糊查找，三者是并且的关系；<br />
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;
										在查询后，如果没有对应的机会，请点击新增客户，如果有对应的机会，则选择机会点击下一步；
									</div>
								</div>

								<div class="widget-header" id="sda" style="height: 35px;">
									<div style="height: 5px;">
										<strong>机会列表</strong>
									</div>
								</div>
								<div class="widget-body" style="padding: 0px">
									<div class="example_alt_pagination">
										<form name="form" action="" method="post">
											<table class="table table-striped">
												<thead>
													<tr>
														<th style="width: 9%; height: 10%">序号</th>
														<th style="width: 20%">客户名称</th>
														<th style="width: 16%">性别</th>
														<th style="" class="hidden-phone">联系电话</th>
														<th style="" class="hidden-phone">是否业主</th>
														<th style="" class="hidden-phone">置业顾问</th>
														<th style="" class="hidden-phone">购房意向</th>
														<th style="width: 10%" class="hidden-phone">机会状态</th>
														<th style="" class="hidden-phone">创建日期</th>
													</tr>
												</thead>
												<tbody>
													<input name="span" th:value="${(page.pageNum-1)}*10" type="hidden"/>
													<th:block th:each="customer :${customers}">
														<tr class="gradeX warning">
															<td><input type="checkbox" style="height: 10px"
																class="no-margin" th:value="${customer.cusId}"><span class="pageSpan"></span></td>
															<td th:text="${customer.cusName}">李四</td>
															<th:block th:switch="${customer.cusGender}">
																<td th:case="1">男</td>
																<td th:case="2">女</td>
															</th:block>
															<td class="hidden-phone" th:text="${customer.cusPhone}">13362488361</td>
															<th:block th:switch="${customer.cusOwner}">
																<td th:case="1">是</td>
																<td th:case="2">否</td>
															</th:block>
															<td class="hidden-phone" th:text="${customer.userName}">王亮</td>
															<td class="hidden-phone"
																th:text="${customer.cusPurchaseIntention}">一般</td>
															<td class="hidden-phone" th:text="${customer.cusState}">预约</td>
															<td class="hidden-phone"
																th:text="${#dates.format(customer.cusCreationDate,'yyyy-MM-dd')}">2017-08-09</td>
														</tr>
													</th:block>
												</tbody>
											</table>
										</form>
										<span style="float: left"><span
											th:text="${page.pageNum}"></span>/<sapn
												th:text="${page.pages}"></sapn>&nbsp;共<sapn
												th:text="${page.total}"></sapn>条记录 </span> <span
											style="float: right;"> <th:block
												th:if="${page.hasPreviousPage == true}">
												<a href="javascript:void(0)" style="color: #00b3b3"
													th:onclick="'javascript:onclickA(\''+${page.firstPage}+'\')'">[首页]</a>
												<a href="javascript:void(0)" style="color: #00b3b3"
													th:onclick="'javascript:onclickA(\''+${page.prePage}+'\')'">[上页]</a>
											</th:block> <th:block th:if="${page.hasNextPage == true}">
												<a href="javascript:void(0)" style="color: #00b3b3"
													th:onclick="'javascript:onclickA(\''+${page.nextPage}+'\')'">[下页]</a>
												<a href="javascript:void(0)" style="color: #00b3b3"
													th:onclick="'javascript:onclickA(\''+${page.lastPage}+'\')'">[末页]</a>
											</th:block>
										</span>

									</div>

								</div>

							</div>
						</div>
					</div>
				</div>
				<div style="padding: 5px; float: right">

					<button id="parentIframe" type="button" class="btn btn-info"
						style="width: 90px;">新增客户</button>
					<button type="button" class="btn btn-info" style="width: 90px">下一步</button>
					<button type="button" class="btn btn-info" style="width: 90px"
						onclick="window.close();">取消</button>
					&nbsp;
				</div>
			</div>
		</DIV>
	</div>

	<form name="addCustomer" id="addCustomer">

		<div id="second" class="dashboard-container" style="display: none;">
			<DIV>
				<div class="dashboard-container">
					<div class="dashboard-wrapper">
						<!-- Row Start -->
						<div class="row">
							<div class="col-lg-12 col-md-12">
								<div class="widget">
									<div class="widget-header" id="sda">
										<div style="height: 10px;">
											<strong>增加客户</strong>
										</div>
									</div>
									<div class="widget-body">
										<div id="dt_example" class="example_alt_pagination">
											<table class="table table-striped">
												<thead>
													<th></th>
													<th>客户1</th>
													<th>客户2</th>
													<th>客户3</th>
													<th>客户4</th>
												</thead>
												<tbody id="cusName">
													<tr>
														<td>客户名称</td>
														<td><input type="text" name="cusName"></td>
														<td><input type="text" name="cusName"></td>
														<td><input type="text" name="cusName"></td>
														<td><input type="text" name="cusName"></td>
													</tr>
													<tr>
														<td>客户电话</td>
														<td><input type="text" name="cusPhone"></td>
														<td><input type="text" name="cusPhone"></td>
														<td><input type="text" name="cusPhone"></td>
														<td><input type="text" name="cusPhone"></td>
													</tr>
													<tr>

														<td class="sb">置业顾问</td>
														<td colspan=4><input type="text" style="width: 984px"
															name="userName" th:value="${session.user.userName}" /> <input type="hidden" name="userId" th:value="${session.user.userId}" /></td>
													</tr>
												</tbody>
											</table>
											<p>&nbsp;
												说明：输入联系电话时，办公室号码输入格式为：区号--电话号码--分机；家庭电话号码输入格式为：区号--电话号码--手机号直接输入</p>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
					<div style="padding: 5px; float: right">

						<button id="back" type="button" class="btn btn-info"
							style="width: 90px;">上一步</button>
						<button id="moving" type="button" class="btn btn-info"
							style="width: 90px">下一步</button>
						<button type="button" class="btn btn-info" style="width: 90px"
							onclick="window.close();">取消</button>
						&nbsp;
					</div>
				</div>
			</DIV>
		</div>


		<DIV style="display: none" id="third">
			<div class="dashboard-container">
				<div class="dashboard-wrapper">
					<!-- Row Start -->
					<div class="row">
						<div class="col-lg-12 col-md-12">
							<div class="widget">
								<div class="widget-header" id="sda">
									<div style="height: 10px;">
										<strong>增加客户</strong>
									</div>
								</div>
								<div class="widget-body copybody">
									<div id="dt_example" class="example_alt_pagination">
										<span class="sbb">&nbsp;&nbsp;客户<span class="cusNumber">1</span></span>
										<table class="table table-striped">
											<tbody>
												<tr>
													<td colspan=2><span class="sb">客户姓名</span> <input type="text"
														style="width: 687px" name="cusName" /></td>

													<td>客户类型 <label class="radio-inline"> <input
															type="radio" class="cusType" name="cusType"
															disabled="disabled" value="公司" > 公司
													</label> <label class="radio-inline"> <input type="radio"
															name="cusType" class="cusType" disabled="disabled" value="个人" >
															个人
													</label></td>
												</tr>
												<tr>
													<td>证件类型 <select style="width: 300px; height: 30px"
														name="cusCertificates">
															<option value="身份证">身份证</option>
													</select></td>

													<td>证件号码 <input type="text" style="width: 300px" name="cusCertificatesNumber"></td>
													<td>性别 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <label
														class="radio-inline"> <input type="radio"
															name="cusGender" class="cusGender" value="1" /> 男
													</label> <label class="radio-inline"> <input type="radio"
															name="cusGender" class="cusGender" value="2" /> 女
													</label></td>
												</tr>
												<tr>
													<td>出生日期 <input type="date"
														style="width: 300px; height: 30px" name="cusBirthDate"/></td>
													<td><span class="sbb">移动电话</span> <input type="text"
														style="width: 300px" name="cusPhone" /></td>
													<td><span class="sbb">办公电话</span> <input type="text"
														style="width: 300px" name="cusOfficePhone" /></td>
												</tr>
												<tr>
													<td><span class="sbb">住宅电话</span> <input type="text"
														style="width: 300px" name="cusResidencePhone" /></td>
													<td><span class="sbb">传真</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="text" style="width: 300px" name="cusFax" />
													</td>
													<td></td>
												</tr>
												<tr bgcolor="red">
													<td colspan=2>通讯地址<input type="text"
														style="width: 687px" name="cusAddress" /></td>

													<td>邮政编码 <input type="text" style="width: 300px"
														name="cusCode" /></td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="padding: 5px; float: right">

					<button id="baak" type="button" class="btn btn-info"
						style="width: 90px;">上一步</button>
					<button type="button" class="btn btn-info" style="width: 90px">下一步</button>
					<button type="button" class="btn btn-info" style="width: 90px"
						onclick="javascript:insertCustomer();">完成</button>
					&nbsp;
				</div>
			</div>
		</DIV>
	</form>

	<script src="js/wysi/wysihtml5-0.3.0.min.js"></script>
	<script t src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/wysi/bootstrap3-wysihtml5.js"></script>
	<script src="js/jquery.scrollUp.js"></script>

	<!-- Color Picker -->
	<script src="js/color-picker/jquery.minicolors.js"></script>

	<!-- Custom JS -->
	<!--复选框只能选4个-->
	<script src="js/menu.js"></script>
	<script>
		//循环序号列
		var span=$("input[name='span']").val();
		$(".pageSpan").each(function(){
			$(this).text((span*1)+1);
			//alert(span);
			span++;
		});
	
	
		var num = 0, checks = [];
		[].push.apply(checks, document.getElementsByTagName('input'));
		function changeStatus(status, dom) {
			if (status) {
				dom.checked = false;
				num--
			}
		}
		document.forms[0].onclick = function(e) {
			var a = e || window.event;
			var target = a.target || a.srcElement;
			if (target.type == 'checkbox') {
				if (target.checked) {
					num++;
				} else {
					num--;
				}
				changeStatus(num > 4, target);
			}
		}
	</script>

	<script type="text/javascript">
	//使用ajax添加客户信息
	function insertCustomer() {
		var customerList = [];//集合
		$(".copybody").each(function(i,item){
			var demo={};//对象
			var cusName = $(this).find("input[name='cusName']").val();//客户姓名
			var cusType=$(this).find(".cusType:checked").val();//客户类型
			var cusCertificatesNumber = $(item).find("input[name='cusCertificatesNumber']").val();//证件号码
			var cusGender =$(item).find(".cusGender:checked").val();//性别
			var cusPhone = $(item).find("input[name='cusPhone']").val();//移动电话
			var cusOfficePhone = $(item).find("input[name='cusOfficePhone']").val();//办公电话
			var cusResidencePhone = $(item).find("input[name='cusResidencePhone']").val();//住宅电话
			var cusFax = $(item).find("input[name='cusFax']").val();//传真
			var cusAddress = $(item).find("input[name='cusAddress']").val();//通讯地址
			var cusCode = $(item).find("input[name='cusCode']").val();//邮政编码
			var cusBirthDate= $(item).find("input[name='cusBirthDate']").val();//出生日期
			var cusCertificates=$(item).find("select[name='cusCertificates']").val();//证件类型
			var userId=$("input[name=userId]").val();//用户id
			demo={cusName:cusName,
					cusType:cusType,
					cusCertificatesNumber:cusCertificatesNumber,
					cusGender:cusGender,
					cusPhone:cusPhone,
					cusOfficePhone:cusOfficePhone,
					cusResidencePhone:cusResidencePhone,
					cusFax:cusFax,
					cusAddress:cusAddress,
					cusCode:cusCode,
					userId:userId,
					cusBirthDate:cusBirthDate,
					cusCertificates:cusCertificates};
			customerList.push(demo);
			
		});
		//alert(customerList.length);
		$.ajax({
			type : "POST",
			url : "/insertCustomer",
			contentType: "application/json",  
			data :JSON.stringify(customerList),
			dataType : "json",
			success : function(data) {
				if (data.num > 0) {
					alert("您添加了"+data.num+"个客户的信息!");
					//("/customerList")
					/* layer.close(layer.index);
					window.parent.location.reload(); */
					window.location.href="/customerList";
				} else if (data.num == false) {
					alert("添加失败!");
				}
			}
		});
	};
	
	
		//a标签的onClick事件
		function onclickA(currentPageNo) {
			//alert(currentPageNo);
			$("#currentPageNo").val(currentPageNo);
			$("#customer-form").submit();
		}

		$('#parentIframe').on('click', function() {
			debugger;
			$("#first").hide();//隐藏第一步
			$("#second").show();//显示第二步
			for (var i = 1; i < unitnum; i++) {//循环追加div
				var copydiv = $('#main').clone();
				$('#follow').append(copydiv);
			}
		});
		var num = 0;
		var nums=0;
		//1.下一步点击事件
		$('#moving').on('click', function() {
			//单击下一步的时候，循环客户姓名，判断需要添加几个客户
			var cusNames =[];//客户姓名数组,将姓名存在数组，使用数组进行赋值
			var cusPhones=[];//客户电话数组，将电话存在数组，使用数组赋值
			$("#cusName td").each(function() {
				var cusName = $(this).find("input[name='cusName']").val();
				var cusPhone = $(this).find("input[name='cusPhone']").val();
				//查询出需要添加几个客户
				if (null != cusName && '' != cusName) {
					cusNames[num]=cusName;
					num = num + 1;
				}
				if (null != cusPhone && '' != cusPhone) {
					cusPhones[nums]=cusPhone;
					//alert(cusPhones[nums]);
					nums++;
				}
			});
			//复制标签
			var copybody = $(".copybody");//获取需要复制的一个元素
			for (var c = 1; c <= num - 1; c++) {
				copybody.clone().insertAfter(copybody);
			}
			
			//循环给客户姓名和客户电话赋值
			var o=0;
			$(".copybody").each(function() {
				$(this).find("input[name='cusName']").val(cusNames[o]);
				$(this).find("input[name='cusPhone']").val(cusPhones[o]);
				o++;
			});
			
			//循环给span赋值（客户1客户2客户N）
			var c = 1;
			$(".cusNumber").each(function() {
				$(this).text(c);
				c++;
			});
			
			//循环给客户类型的name赋值
			var cusType = $(".cusType").attr("name");
			var custypeNum = 1;
			var custypeNumber = 1;
			$(".cusType").each(function() {
				//每次给两个单选框一样的name值
				$(this).attr("name", cusType + custypeNum);
				if (custypeNumber % 2 == 0) {
					$(this).attr("checked", true);
					;
					custypeNum++;
				}
				custypeNumber++;
			});
			
			//循环给性别的name赋值
			var sex = $(".cusGender").attr("name");
			var sexNum = 1;
			var sexNumber = 1;
			$(".cusGender").each(function() {
				//每次给两个单选框一样的name值
				$(this).attr("name", sex + sexNum);
				if (sexNumber % 2 == 0) {
					sexNum++;
				} else {
					$(this).attr("checked", true);//默认选中[男]
				}
				sexNumber++;
			});

			debugger;
			$("#first").hide();//隐藏第一步
			$("#second").hide();//显示第二步
			$("#third").show();
			for (var i = 1; i < unitnum; i++) {//循环追加div
				var copydiv = $('#main').clone();
				$('#follow').append(copydiv);
			}
		});//2.上一步点击事件
		$('#baak').on('click', function() {
			//移除copy的标签
			for (var r = 0; r < num - 1; r++) {
				var removebody = $(".copybody:last");//获取最后一个需要移除的元素
				removebody.remove();
				//alert("r:"+r);
			}
			num = 0;//num归0，重新计算需要添加的客户数量
			debugger;
			$("#first").hide();
			$("#second").show();
			$("#third").hide();
		});

		$('#back').on('click', function() {
			debugger;
			$("#first").show();
			$("#second").hide();
		});//上一步点击事件
	</script>

	<script type="text/javascript">
		
		//ScrollUp
		$(function() {
			$.scrollUp({
				scrollName : 'scrollUp', // Element ID
				topDistance : '300', // Distance from top before showing element (px)
				topSpeed : 300, // Speed back to top (ms)
				animation : 'fade', // Fade, slide, none
				animationInSpeed : 400, // Animation in speed (ms)
				animationOutSpeed : 400, // Animation out speed (ms)
				scrollText : 'Top', // Text for element
				activeOverlay : false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
			});
		});

		//Tooltip
		$('a').tooltip('hide');

		//Popover
		$('.popover-pop').popover('hide');

		//Dropdown
		$('.dropdown-toggle').dropdown();
	</script>

</body>
</html>